<template>
  <zm-panel
    :title="pTitle"
    :visible.sync="value"
    append-to-body
    size="small"
    :before-close="close"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      ref="form"
      :rules="Rules"
      label-width="140px"
      label-position="right"
    >
      <el-form-item label="开票日期：" prop="makeTime">
        <el-date-picker
          v-model="form.makeTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="销售单号："
        prop="saleOrderNo"
      >
        {{form.saleOrderNo}}
      </el-form-item>
      <el-form-item label="关联客户：" prop="customerName">
        {{form.customerName||'--'}}
      </el-form-item>
      <el-form-item label="销售单总额：" prop="saleTotalPrice">
        ￥{{form.saleTotalPrice||'0'}}
      </el-form-item>
      <el-form-item label="实际应收：" prop="realitySaleTotalPrice">
        ￥{{form.realitySaleTotalPrice||'0'}}
      </el-form-item>
      <el-form-item label="已开票金额：" prop="invoiceAmount">
        ￥{{form.invoiceAmount||'0'}}
      </el-form-item>
      <el-form-item label="开票金额：" prop="amount">
        <zm-input
          v-model="form.amount"
          placeholder="请输入开票金额"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="开票主体：" prop="invoiceMain">
        <zm-input
          v-model="form.invoiceMain"
          placeholder="请输入开票主体"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="我方信息：" prop="ourInformation">
        <zm-data-select
          v-model="form.ourInformation"
          api="getOrderCompanyList"
          label-name="companyName"
          value-key="companyId"
          placeholder="我方信息"
          class="w200"
        ></zm-data-select>
      </el-form-item>
      <el-form-item label="票据类型：" prop="invoiceType">
        <zm-data-select
          v-model="form.invoiceType"
          k1="invoiceType"
          label-name="name"
          placeholder="票据类型"
          class="w200"
        ></zm-data-select>
      </el-form-item>
      <el-form-item label="纳税人识别号：" prop="identifyNumber">
        <zm-input
          v-model="form.identifyNumber"
          placeholder="请输入纳税人识别号"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="发票号码：" prop="invoiceNumber">
        <span class="mr5">NO</span>
        <zm-input
          v-model="form.invoiceNumber"
          placeholder="请输入发票号码"
          class="w270"
        />
      </el-form-item>
      <el-form-item label="发票代码：" prop="invoiceCoding">
        <zm-input
          v-model="form.invoiceCoding"
          placeholder="请输入发票代码"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="票据内容：" prop="billRemark">
        <zm-input
          type="textarea"
          v-model="form.billRemark"
          placeholder="请输入票据内容"
          :autosize="{ minRows: 3 }"
          :maxlength="500"
          class="w400"
        />
        <div class="mtb10">
          <el-button
            size="mini"
            type="primary"
            @click="
              () => {
                form.billRemark = '现代服务*电影票';
              }
            "
            class="vm mr10"
          >
            现代服务*电影票
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="
              () => {
                form.billRemark = ' 烘焙食品蛋糕';
              }
            "
            class="vm"
          >
            烘焙食品蛋糕
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="地址、电话：">
        <zm-input
          v-model="form.address"
          placeholder="请输入地址、电话"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="开户行及账号：">
        <zm-input
          v-model="form.openingAccount"
          placeholder="请输入客户开户行及账号"
          class="w300"
        />
      </el-form-item>
      <el-form-item label="上传发票相关附件：">
        <zm-upload
          v-model="form.accessory"
          :http-request="fileUpload"
          accept=".rar,.zip,.doc,.docx,.pdf"
          :limit="1"
          :single-file-size="20"
        >
          <zm-button>选择附件</zm-button>
        </zm-upload>
      </el-form-item>
      <el-form-item label="备注信息：">
        <zm-input
          type="textarea"
          v-model="form.remark"
          placeholder="请输入备注信息"
          :autosize="{ minRows: 3 }"
          :maxlength="500"
          class="w400"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="submit">确定</el-button>
    </div>
  </zm-panel>
</template>

<script>
import ZmUpload from '@/components/ZmUpload/components/main'
import panelMixin from '@/mixins/panelMixin'
import { INVOICE_MAKETYPE } from '../const'
import {getInfo,
  checkSaleOrder,
  update,
  create} from '@/api/src/invoice'
import api from '@/api'
import { dft } from '@/utils'
export default {
  components: { ZmUpload },
  mixins: [panelMixin],
  props: {},
  data () {
    return {
      INVOICE_MAKETYPE,
      dft,
      form: {
        status: '1', // 发票状态  1  待开票   2 已开票
        makeType: '1', // 开票笔数   1 单笔销售单开票   2  多笔销售单合并开票
        makeTime: '',
        saleOrderNo: '',
        customerName: '',
        saleTotalPrice: '',
        invoiceAmount: '',
        amount: '',
        invoiceMain: '',
        ourInformation: '',
        invoiceType: '',
        identifyNumber: '',
        invoiceNumber: '',
        invoiceCoding: '',
        billRemark: '',
        address: '',
        openingAccount: '',
        accessory: '',
        remark: ''
      },
      saleOrderNo: [''],
      Rules: {
        makeTime: {
          required: true,
          message: '选择开票日期',
          trigger: 'change'
        },
        amount: {
          required: true,
          message: '请输入开票金额',
          trigger: 'blur'
        },
        invoiceMain: {
          required: true,
          message: '请输入开票主体',
          trigger: 'blur'
        },
        ourInformation: {
          required: true,
          message: '请选择我方信息',
          trigger: 'change'
        },
        invoiceType: {
          required: true,
          message: '请选择票据类型',
          trigger: 'change'
        },
        invoiceNumber: {
          required: true,
          message: '请输入发票号码',
          trigger: 'blur'
        },
        billRemark: {
          required: true,
          message: '请输入票据内容',
          trigger: 'blur'
        },
        address: {
          required: true,
          message: '请输入地址、电话号码',
          trigger: 'blur'
        },
        openingAccount: {
          required: true,
          message: '请输入客户开户行、账号',
          trigger: 'blur'
        },
        accessory: {
          required: true,
          message: '请上传附件',
          trigger: 'change'
        },
        remark: { required: true, message: '请输入备注信息', trigger: 'blur' }
      }
    }
  },
  computed: {
    pTitle () {
      return this.obj.id ? '发票信息录入' : '发票信息新增'
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const form = await getInfo({id: this.obj.id})
      this.form = Object.assign({}, this.form, form)
      this.form.makeTime = this.dft('now', 'YYYY-MM-DD')
      this.saleOrderNo = this.form.saleOrderNo.split(',')
      this.$set(this.form, 'invoiceNumber', this.form.invoiceNumber.replace(/NO/g, ''))
    },
    async submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) {
        return
      }

      if (+this.form.amount > +this.form.realitySaleTotalPrice - +this.form.invoiceAmount) {
        this.$confirm('开票金额已超过实际应收减去已开票金额,确定开票?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const _api = this.obj.id ? update : create
          _api(this.form).then(r => {
            this.$message.success(`${this.pTitle}成功`)
            this.$emit('after')
            this.close()
          })
        }).catch(() => {

        })
      } else {
        const _api = this.obj.id ? update : create
        _api(this.form).then(r => {
          this.$message.success(`${this.pTitle}成功`)
          this.$emit('after')
          this.close()
        })
      }
    },
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      // 上传接口对接
      const res = await api.upload.uploadImg(params)
      this.form.accessoryName = res.name
      return res.url
    },
    onFileRemove () {
      this.form.accessory = ''
    }
  }
}
</script>
